<template>
    <div class="swipe-bg">
        <div class="slider-bg"></div>
        <van-swipe :autoplay="4000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <van-image :src="image.image_url" radius="0.35rem">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Loading } from 'vant';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Loading);
Vue.use(Swipe).use(SwipeItem);

export default {
    name: "swipe",
    props: ['images'],
    data() {
        return {

        }
    }
}
</script>

<style scoped>
    .swipe-bg{
        padding: 0.4rem 0.6rem;
        overflow: hidden;
        position: relative;
    }
    .slider-bg{
        background-image: linear-gradient(0deg, #f17102, #f1a42a 50%);
        position: absolute;
        top: 0;
        left: -25%;
        height: 7.25rem;
        width: 150%;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
    }
    .van-swipe{
        box-shadow: 0 0 5px 0 #f2f3f5;
    }
    .van-image{
        display: block;
    }
</style>
